<template>
  <div class="wealth-shell">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="fixed">
      <wealth-bg></wealth-bg>
      <div class="my-bill" :class="{hide: hideInfo}" @click="showBill">
        <i class="bill-icon"></i>
        <i class="circle" :class="{show: showBillTips}"></i>
        <i class="corner" :class="{show: showBillTips}"></i>
      </div>
      <div class="shell-tips-box" :class="{hide: hideInfo}">
        <div class="shell-tips" :class="{show: showBillTips}">
          <i class="shell-icon"></i>
          <p>{{shell_tips.text}}</p>
          <i class="close" @click="closeShellTips"></i>
        </div>
      </div>
      <div class="shell-top">
        <div v-if="open_shell == '1'">
          <div class="slide">
            <ul class="swiper-wrapper">
              <!-- :key="item.currency_code" -->
              <li
                class="shell-banner swiper-slide"
                v-for="(item,index) in shellBannerList"
                :key="index"
                :data-code="item.currency_code"
              >
                <div class="banner-top">
                  <p class="banner-left">{{showTitle}}</p>
                  <div class="banner-right">
                    <!-- :class="showRepaymentBtn"  -->
                    <span class="right-repayment show" @click="repayment">还款</span>
                    <i></i>
                    <span class="right-quota" @click="quotaApplication(item)">额度申请</span>
                  </div>
                </div>
                <p class="banner-tips">{{shell_tips.current_currency}}</p>
                <div class="banner-mid">
                  <span class="mid-total">总额度</span>
                  <span class="mid-use">可用额度</span>
                </div>
                <div class="banner-bottom">
                  <span class="bottom-total">{{shell.credit.total_amount}}</span>
                  <span class="bottom-use">{{shell.credit.symbol_amount}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="shell-banner other" v-else>
          <h4>{{showInfo}}</h4>
          <p class="user_str" :class="showAccountTipsColor">
            {{shell.user.str | showAccountContent(1, shell.user.flow_status)}}
            <span
              v-if="shell.user.flow_status == '0'"
              class="use-t"
            >
              点击继续
              <span class="use-t2" @click="doAll">"完善资料"</span>
            </span>
            <span v-if="shell.user.flow_status == '-1'" class="use-t">
              点击
              <span class="use-t2" @click="doAll">"重新完善资料"</span>
            </span>
          </p>
          <p
            class="user_str_tips"
            :class="{red: shell.user.flow_status == '-1' || shell.user.flow_status == '-2'}"
          >{{shell.user.str | showAccountContent(2, shell.user.flow_status)}}</p>
        </div>
      </div>
    </div>
    <div class="h428"></div>
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <div class="shell-mid" :class="{hide: hideInfo}">
        <div class="shell-bill-item" @click="showShellBill(1)">
          <span>预授权占用</span>
          <i></i>
          <div class="shell-mid-right">
            <p>{{shell.credit.symbol_frozen_amount}}</p>
            <p class="shell-itme-p">包含下线：{{shell.credit.symbol_sub_frozen_amount}}</p>
          </div>
        </div>
        <div class="shell-bill-item" @click="showShellBill(2)">
          <span>未确认订单占用</span>
          <i></i>
          <div class="shell-mid-right">
            <p>{{shell.credit.symbol_uncommit_amount}}</p>
            <p class="shell-itme-p">包含下线：{{shell.credit.symbol_sub_uncommit_amount}}</p>
          </div>
        </div>
        <div class="shell-bill-item" @click="showShellBill(3)">
          <span>未出账单占用</span>
          <i></i>
          <div class="shell-mid-right">
            <p>{{shell.credit.symbol_cur_bill_unpay}}</p>
            <p class="shell-itme-p">包含下线：{{shell.credit.symbol_sub_cur_bill_unpay}}</p>
          </div>
        </div>
        <div class="shell-bill-item" @click="showShellBill(4)">
          <span>已出账单占用</span>
          <i></i>
          <div class="shell-mid-right">
            <p>{{shell.credit.symbol_last_bill_unpay}}</p>
            <p class="shell-itme-p">包含下线：{{shell.credit.symbol_sub_last_bill_unpay}}</p>
          </div>
        </div>
      </div>
      <div class="shell-line"></div>
      <div class="shell-bottom">
        <div class="shell-bottom-title">
          <div
            class="shell-title-item"
            :class="{active: this.showAccountStatement}"
            @click="changeItem(1)"
          >
            <p>账户流水</p>
            <i></i>
          </div>
          <div
            class="shell-title-item"
            :class="{active: !this.showAccountStatement}"
            @click="changeItem(2)"
          >
            <p>待审核额度申请</p>
            <i></i>
          </div>
        </div>
        <div class="shell-bottom-list" v-if="!hideInfo">
          <div v-if="list.length > 0">
            <div v-if="showAccountStatement">
              <account-statement-item
                v-for="(item,index) in bill_month_details"
                :key="index"
                :account-item="item"
                :account-sym="yes"
                @account-item-e="accountItemEvent"
              ></account-statement-item>
            </div>
            <div v-else>
              <quota-application-item
                v-for="(item,index) in quota_list"
                :key="index"
                :account-item="item"
                @quota-item="quotaItemEvent"
              ></quota-application-item>
            </div>
          </div>
        </div>
        <ui-empty :empty="{text:'暂无数据'}" v-if="list.length==0"></ui-empty>
      </div>
      <div
        class="shell-bottom-tips"
        :class="{hide: hideInfo || hideStatementTips}"
      >{{showAccountOrQuota}}</div>
    </ScrollList>
    <div class="current-bill-tips" :class="{show: isShowCurrentTips}">
      <div class="current-cont">
        <i></i>
        <h4>{{showCurrentTips}}</h4>
        <div class="current-bottom-line"></div>
        <p @click="closeCurrentTips">我知道了</p>
      </div>
    </div>
    <div class="current-repayment-tips" :class="{show: isShowRepaymentTips}">
      <div class="current-cont">
        <h4>乐钱包余额不足</h4>
        <p>请先充值到乐钱包后再还款</p>
        <div class="current-bottom-line"></div>
        <span class="current-left" @click="cancelRepayment">取消</span>
        <span class="current-right" @click="goRecharge">去充值</span>
      </div>
    </div>
  </div>
</template>

<script>
import AccountStatementItem from "~/components/AccountStatementItem.vue";
import QuotaApplicationItem from "~/components/QuotaApplicationItem.vue";
import Swiper from "swiper";
import WealthBg from "~/components/WealthBg.vue";
import UiEmpty from "~/components/empty";
import ScrollList from "~/components/ScrollList";
import UILoading from "~/components/loading";

export default {
  components: {
    WealthBg,
    AccountStatementItem,
    QuotaApplicationItem,
    ScrollList,
    UiEmpty,
    [UILoading.name]: UILoading
  },
  data: function() {
    return {
      yes: "yes",
      swiper: "",
      page: 1,
      total: 1,
      list: [],
      loading: false,
      config: {
        bottom: false,
        pull: false,
        end: false
      },
      initLoading: true,

      isShowRepaymentTips: false,
      hideStatementTips: true, //隐藏流水提示
      isShowCurrentTips: false,
      showAccountStatement: true, //是否显示账单流水 还是 额度申请流水
      showBillTips: false, //是否显示顶部当前账单提示
      isShowBill: false, //跳转账单 是否为已出账单
      isShowUnbill: false, //跳转账单 是否为未出账单
      shellBannerList: [],
      //检查是否开通乐贝
      open_shell_data: {
        code: 0,
        msg: "OK",
        data: {
          state: "0"
        }
      },
      currency_code: "CNY",
      shell_tag: [
        "恭喜你，本期账单空",
        "已出账单",
        "未出账单",
        "恭喜你，本期账单已经还清",
        "已逾期"
      ],
      shell_tips: {
        tag: "1",
        current_currency: "", //本币种账单剩余应还:202.00
        text: "" //人民币,美元账单将11天后逾期
      },
      shell_user: {
        str: "", //恭喜成为我们的铂金会员，请先到网页端完善资料
        uid: "", //6d96f0cd038a78031243f239400a6afe
        flow_status: "1"
      },
      //乐贝
      shell_data: {
        code: 0,
        msg: "OK",
        data: {
          user: {
            str: "资料正在审核中请耐心等待",
            uid: "6d96f0cd038a78031243f239400a6afe",
            flow_status: "1"
          },
          credit: {
            total_amount: "5000.0000",
            symbol_amount: "4072.39 CNY",
            symbol_frozen_amount: "85 CNY",
            symbol_sub_frozen_amount: "83 CNY",
            symbol_uncommit_amount: "6 CNY",
            symbol_sub_uncommit_amount: "0 CNY",
            symbol_cur_bill_unpay: "287.9 CNY",
            symbol_sub_cur_bill_unpay: "285.9 CNY",
            symbol_last_bill_unpay: "308.7 CNY",
            symbol_sub_last_bill_unpay: "180 CNY",
            name: "人民币",
            symbol: "¥"
          },
          guess_params: {
            tag: "1",
            current_currency: "本币种账单剩余应还:202.00",
            text: "人民币,美元账单将11天后逾期"
          }
        }
      },
      //获取乐呗相关情况
      get_shell_data: {
        code: 0,
        msg: "OK",
        data: {
          list: []
        }
      },
      //当前月
      current_month: "2018-11",
      //某月份账单流水详情
      bill_month_details_data: {
        code: 0,
        msg: "OK",
        data: {
          total: "0",
          list: []
        }
      },
      //额度申请列表
      quota_list_data: {
        code: 0,
        msg: "OK",
        data: {
          total: 2,
          list: []
        }
      },
      //自定义还款组合是否够还款
      repayment_gruop: {
        code: 0,
        msg: "OK",
        data: {
          state: "0"
        }
      },
      //还款
      repayment_now: {
        code: 0,
        msg: "OK",
        data: {
          state: 1
        }
      },
      //还款数据
      repayment_data: {
        code: 0,
        msg: "OK",
        data: {
          bills: {
            has_due: "0",
            month: "12.03",
            has_balance: "1",
            groups: [],
            list: [],
            str: "未出账单",
            has_usable: "1"
          },
          wallet: []
        }
      }
    };
  },
  computed: {
    currencys() {
      return this.$store.state.currencys;
    },
    //
    bill_month_details() {
      return this.list;
    },
    show_tips() {
      return this.$store.state.wealthLeShellBill.bill_month_tips == "已还清";
    },
    showCurrentTips() {
      let _tag = this.shell_tips.tag;
      return _tag == "-1" ? this.shell_tag[4] : this.shell_tag[_tag];
    },
    //检查是否开通乐贝
    open_shell() {
      return this.open_shell_data.data.state;
    },
    // 获取乐呗相关情况
    get_shell() {
      return this.get_shell_data.data.list;
    },
    //某个币种的 账户信息
    shell() {
      return this.shell_data.data;
    },

    showBanner() {
      return this.shell_user.flow_status == "1" ? true : false;
    },
    //隐藏几个模块
    hideInfo() {
      return this.shell_user.flow_status != "1" || this.open_shell == "0"
        ? true
        : false;
    },
    showAccountTipsColor() {
      let _user = this.shell_user;
      return {
        red: _user.flow_status == -2 ? true : false,
        yellow: _user.flow_status > 0 ? true : false
      };
    },
    showAccountOrQuota() {
      return this.showAccountStatement ? "已显示全部流水" : "已显示全部";
    },
    showRepaymentBtn() {
      let _tag = this.shell_tips.tag;
      return {
        show: _tag == "0" || _tag == "3" || this.show_tips ? false : true
      };
    },
    showTitle() {
      let _code = "";
      this.currencys.forEach(element => {
        if (element.code == this.currency_code) {
          _code = element.name;
          return;
        }
      });
      return _code;
    },
    showInfo() {
      let _user = this.shell_user;
      let str = "";
      switch (_user.flow_status) {
        case "1":
          str = "已开通";
          break;
        case "4":
          str = "资料审核中";
          break;
        case "0":
          str = "暂未完善资料";
          break;
        case "-1":
          str = "资料审核失败";
          break;
        case "-2":
          str = "账号被停用";
          break;
        default:
          str = "暂未完善资料";
      }
      return str;
    },
    //额度申请列表
    quota_list() {
      // return this.$store.state.wealthLeShell.quota_list.data.list;
      // return this.quota_list_data.data.list;
      return this.list;
    }
  },
  watch: {
    currency_code(val, oldVal) {
      this.$store.commit("wealthLeShell/SET_currency_code", val);
    }
  },
  mounted() {
    let that = this;
    (async () => {
      await this.get_open_shell();
    })();
    // this.$nextTick(() => {
    //   this.$refs.scroll.$emit("pulling");
    // });
    this.$nextTick(() => {
      setTimeout(() => {
        this.swiper = new Swiper(".slide", {
          slidesPerView: "auto",
          centeredSlides: !0,
          watchSlidesProgress: !0,
          pagination: ".swiper-pagination",
          paginationClickable: !0,
          initialSlide: this.idx,
          on: {
            slideChange: function() {
              var a = this.slides;
              that.currency_code = a[this.activeIndex].getAttribute(
                "data-code"
              );
              (async () => {
                await that.getList(that.currency_code);
              })();
              (async () => {
                that.$nuxt.$loading.start();
                that.page = 1;
                that.config.end = false;
                await that.getPage(that.currency_code, true);
              })();
            }
          }
        });
      }, 500);
    });
  },
  methods: {
    async get_open_shell() {
      let { data: rs } = await this.$axios.post("?ct=api&ac=check_credit");
      if (rs.code == 0) {
        this.open_shell_data = rs;
        this.initLoading = true;

        await this.getBanner();
        // this.currency_code = this.currencys[0].code;
        if (rs.data.state == "1") {
          await this.get_bill("bill");
          await this.get_bill("unbill");
          await this.getPage(this.currency_code);
        }

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async getBanner() {
      this.initLoading = true;
      let { data: rs } = await this.$axios.post("?ct=api&ac=get_credit");
      if (rs.code == 0) {
        let data = rs.data.list;
        this.get_shell_data = rs;

        this.shellBannerList = data;
        let allCurrencys =
          this.currencys || JSON.parse(sessionStorage.getItem("currencys"));
        let arr = [];
        for (var i = 0; i < allCurrencys.length; i++) {
          let news = {};
          news.id = 0;
          news.uid = "";
          news.currency_code = allCurrencys[i].code;
          news.type = 0;
          news.currency_name = allCurrencys[i].name;
          news.default_amount = "0.00";
          news.total_amount = "0.00";
          news.used_amount = "0.00";
          news.amount = "0.00";
          news.frozen_amount = 2;
          news.top_parentid = "";
          news.sub_used_amount = "0.00";
          news.uncommit_amount = 0;
          news.cur_bill_amount = 0;
          news.last_bill_amount = 0;
          arr.push(news);
        }

        for (let i = 0; i < arr.length; i++) {
          let code = arr[i].currency_code;
          let flag = true;
          for (let j = 0; j < data.length; j++) {
            if (code == data[j].currency_code) {
              flag = false;
            }
          }
          if (flag) {
            data.push(arr[i]);
          }
        }
        this.currency_code = data[0].currency_code;
        await this.getList(this.currency_code);
        // await Promise.all([
        //   this.getList(this.currency_code),
        //   this.getPage(this.currency_code)
        // ]);

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async get_bill(title) {
      this.initLoading = true;
      let { data: rs } = await this.$axios.post("?ct=api&ac=my_bill", {
        tab: title
      });
      if (rs.code == 0) {
        let guess_params = rs.data.guess_params;
        let dat = guess_params.month;
        let arr = dat.split("-");
        let _month = arr[1];
        let len = rs.data.list.length;
        if (title == "bill") {
          if (len > 0) this.isShowBill = true;
          this.$store.commit("wealthLeShellBill/SET_lastMonth", _month);
          this.$store.commit("wealthLeShellBill/SET_last_year_day", dat);
          this.$store.commit(
            "wealthLeShellBill/SET_bill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_bill_month_tips",
            rs.data.guess_params.text
          );
          // this.current_month = rs.data.guess_params.month;
        } else {
          if (len > 0) this.isShowUnbill = true;
          this.$store.commit("wealthLeShellBill/SET_thisMonth", _month);
          this.$store.commit("wealthLeShellBill/SET_this_year_day", dat);
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_month_tips",
            rs.data.guess_params.text
          );
        }

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async get_repayment_data() {
      let { data: rs } = await this.$axios.post(
        "?ct=api&ac=get_repayment_data"
      );
      this.$store.commit("wealthLeShell/SET_repayment_data", rs);
      if (rs.code == 0) {
        let wallet = rs.data.wallet;
        if (wallet.length < 1) {
          this.isShowRepaymentTips = true;
        } else {
          let has_cash = false;
          wallet.forEach((item, index, array) => {
            if (item.amount > 0) {
              has_cash = true;
              return;
            }
          });
          if (has_cash) {
            this.$router.push("/WealthLeShellRepayment");
          } else {
            this.isShowRepaymentTips = true;
          }
        }
      } else {
        this.$toast(rs.msg);
      }
    },
    async getList(code, isRefresh) {
      try {
        let { data: rs } = await this.$axios.post(
          "?ct=api&ac=treasure_credit",
          {
            currency_code: code
          }
        );
        if (rs.code == 0) {
          this.shell_data = rs;
          this.shell_tips = rs.data.guess_params;
          this.shell_user = rs.data.user;
          if (this.shell_tips.text) {
            this.showBillTips = true;
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }

      this.loading = false;
    },
    async getPage(code, isRefresh) {
      if (this.loading || this.config.end) return false;
      this.loading = true;
      try {
        let rs = {};
        if (this.showAccountStatement) {
          rs = await this.$axios.post("?ct=api&ac=payment_logs", {
            page: this.page,
            currency_code: code,
            from_type: 2
          });
        } else {
          rs = await this.$axios.post("?ct=api&ac=apply_list", {
            page: this.page,
            currency_code: this.currency_code,
            tab: "my_audit",
            status: 0
          });
        }
        rs = rs.data;
        if (rs.code == 0) {
          const { data } = rs;

          if (this.showAccountStatement) {
            this.bill_month_details_data = rs;
          } else {
            this.quota_list_data = rs;
          }

          this.total = Number(data.total);
          if (this.total < 1) {
            this.hideStatementTips = true;
          } else {
            this.hideStatementTips = false;
          }
          if (isRefresh) {
            this.list = data.list;
          } else {
            this.list = this.list.concat(data.list);
          }
          if (this.total > this.list.length) {
            this.page++;
            this.config.end = false;
          } else {
            this.config.end = true;
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
      this.loading = false;
    },
    async pull(cb) {
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      this.getList(this.currency_code);
      this.getPage(this.currency_code, true);
      this.$nuxt.$loading.finish();
      cb();
    },

    //
    showBill() {
      if (this.isShowBill) {
        this.$store.commit("wealthLeShellBill/SET_is_show_history", false);
        this.$store.commit("wealthLeShellBill/SET_current_bill_page", "last");
      } else if (this.isShowUnbill) {
        this.$store.commit("wealthLeShellBill/SET_is_show_history", false);
        this.$store.commit("wealthLeShellBill/SET_current_bill_page", "this");
      } else {
        this.$store.commit("wealthLeShellBill/SET_is_show_history", true);
        this.$store.commit(
          "wealthLeShellBill/SET_current_bill_page",
          "history"
        );
      }
      this.$router.push("/WealthLeShellBill");
    },
    closeShellTips() {
      this.showBillTips = false;
    },
    closeCurrentTips() {
      this.isShowCurrentTips = false;
    },
    //取消
    cancelRepayment() {
      this.isShowRepaymentTips = false;
    },
    //去充值
    goRecharge() {
      this.$router.push({
        path: "/wealth/recharge",
        query: { code: this.currency_code }
      });
    },
    //我的账单 跳转
    showShellBill(index) {
      switch (index) {
        case 1:
          this.$router.push({ path: "/bill", query: { id: 6 } });
          break;
        case 2:
          this.$router.push({
            path: "/order",
            query: { tab: "my_uncommit", idx: 2 }
          });
          break;
        case 3:
          this.$store.commit("wealthLeShellBill/SET_is_show_history", false);
          this.$store.commit("wealthLeShellBill/SET_current_bill_page", "this");
          this.$router.push("/WealthLeShellBill");
          break;
        case 4:
          this.$store.commit("wealthLeShellBill/SET_is_show_history", false);
          this.$store.commit("wealthLeShellBill/SET_current_bill_page", "last");
          this.$router.push("/WealthLeShellBill");
        default:
      }
    },
    repayment() {
      if (this.shell_tips.tag == "3") {
        this.isShowCurrentTips = true;
        return;
      }
      this.get_repayment_data();
      // this.$router.push("/WealthLeShellRepayment");
    },
    quotaApplication() {
      this.$router.push({
        path: "/amount/amount_apply",
        query: { code: this.currency_code }
      });
    },
    //账单流水 跳转详情
    accountItemEvent(item) {
      if (item.is_show == "1") {
        this.$router.push({
          path: "bill/bill-details",
          query: { bill_id: item.bill_id }
        });
      }
    },
    //待审核额度申请 跳转
    quotaItemEvent(bill_id, type) {
      /*  console.log(type)
      if(type == 'agree'){
        this.$router.push({path:'/credit/argee',query:{bill_id:bill_id}});
      }else{
        this.$router.push({path:'/credit/reject',query:{bill_id:bill_id}})
      } */
    },
    changeItem(id) {
      if (this.showAccountStatement && id == 1) return;
      if (!this.showAccountStatement && id == 2) return;
      this.showAccountStatement = !this.showAccountStatement;
      //账单流水 额度申请 切换初始化
      this.page = 1;
      this.total = 1;
      //this.list = [];
      this.loading = false;
      this.config = {
        bottom: false,
        pull: false,
        end: false
      };

      if (this.open_shell == "0") return;
      //请求 对应接口数据
      this.getPage(this.currency_code, true);
    },
    doAll() {
      this.$router.push({ name: "complete_info" });
    }
  },
  filters: {
    formataAmount(amount) {
      return amount;
    },
    showAccountContent(str, index, flow_status) {
      //完善资料后将获得我们的信用额度，享受会员专属折扣
      let arr = str.split("#");
      let len = arr.length;
      if (index == 1) {
        str = arr[0];
        if (flow_status == "-1" || flow_status == "0") {
          let arr2 = str.split("点击");
          str = arr2[0];
        }
      } else {
        str = arr[1] ? arr[1] : "";
      }
      return str;
    }
  }
};
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 999;
  width: 100%;
}
.h428 {
  height: 428px;
}
.swiper-wrapper {
  display: flex;
  transform-style: preserve-3d;
}

.wealth-shell {
}
.my-bill {
  position: absolute;
  top: -66px;
  right: 30px;
  z-index: 100;
}
.my-bill.hide {
  display: none;
}
.my-bill .bill-icon {
  display: block;
  width: 42px;
  height: 44px;
  background: url("~assets/img/my_account_list.png") no-repeat;
  background-size: 42px 44px;
}
.my-bill .circle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: #f05521;
}
.my-bill .circle.show {
  display: block;
}
.my-bill .corner {
  display: none;
  position: absolute;
  right: 16px;
  margin-top: -8px;
  border-style: solid;
  border-width: 14px 10px 14px 10px;
  /* border-color: #fff #2087f9 #2087f9 #2087f9; */
  border-color: rgba(240, 85, 33, 0) rgba(240, 85, 33, 0) rgba(240, 85, 33, 0.9)
    rgba(240, 85, 33, 0);
  width: 0px;
  height: 0px;
}
.my-bill .corner.show {
  display: block;
}
.shell-tips-box {
  position: absolute;
  top: -4px;
  right: 20px;
  z-index: 100;
}
.shell-tips-box.hide {
  display: none;
}
.shell-tips-box .shell-tips {
  display: none;
  align-items: center;
  line-height: 60px;
  background-color: rgba(240, 85, 33, 0.9);
  border-radius: 60px;
}
.shell-tips-box .shell-tips.show {
  display: flex;
}
.shell-tips .shell-icon {
  margin-left: 20px;
  width: 30px;
  height: 21px;
  background: url("~assets/img/ic_lebei_bubble_horn@2x.png") no-repeat;
  background-size: 30px 21px;
}
.shell-tips p {
  padding-left: 20px;
  padding-right: 20px;
  font-family: "PingFangSC-Regular";
  font-size: 28px;
  color: rgb(255, 255, 255);
}
.shell-tips .close {
  margin-right: 20px;
  width: 13px;
  height: 13px;
  background: url("~assets/img/ic_lebei_bubble_close@2x.png") no-repeat;
  background-size: 13px 13px;
}

.shell-top {
  overflow: hidden;
  margin-top: -208px;
  height: 340px;
}
.shell-banner {
  line-height: 1;
  width: 708px;
  height: 340px;
  background: url("~assets/img/caifu_kapian.png") no-repeat;
  background-size: 708px 340px;
}
.shell-banner:first-child {
  display: block;
}
.banner-top {
  /* margin-top: 54px; */
  padding-top: 54px;
  width: 708px;
}
.banner-left {
  display: inline-block;
  margin-left: 74px;
  font-size: 42px;
  font-family: "PingFangSC-Medium";
}
.banner-right {
  display: flex;
  float: right;
  align-items: center;
  margin-right: 74px;
  line-height: 42px;
}
.banner-right span {
  font-family: "PingFangSC-Regular";
  font-size: 28px;
  color: rgb(32, 134, 249);
}
.banner-right i {
  margin-left: 30px;
  margin-right: 30px;
  width: 2px;
  height: 28px;
  background-color: #ededf0;
}
.right-repayment {
  /* display: none; */
  /* margin-right: 48px; */
}
.right-repayment.show {
  /* display: inline; */
}
.right-quota {
}
.banner-tips {
  margin-top: 10px;
  margin-left: 74px;
  font-size: 24px;
  color: #f05521;
  font-family: "PingFangSC-Regular";
}
.banner-mid {
  display: flex;
  margin-left: 74px;
  margin-top: 40px;
  font-size: 24px;
  color: rgb(153, 153, 153);
  font-family: "PingFangSC-Regular";
}
.mid-total {
  flex: 1;
}
.mid-use {
  flex: 1;
}
.banner-bottom {
  display: flex;
  margin-left: 72px;
  margin-top: 24px;
  font-size: 42px;
  color: rgb(41, 41, 41);
  font-family: "SFUIDisplay-Medium";
}
.bottom-total {
  flex: 1;
}
.bottom-use {
  flex: 1;
}
.shell-banner.other,
.shell-banner .other {
  margin-left: 22px;
  text-align: center;
}
.shell-banner.other h4,
.shell-banner .other h4 {
  padding-top: 70px;
  font-size: 42px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Medium";
}
.shell-banner.other .user_str,
.shell-banner .other .user_str {
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 30px;
  line-height: 1.3;
  font-size: 24px;
  font-family: "PingFangSC-Regular";
  color: rgb(153, 153, 153);

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shell-banner.other .user_str.red,
.shell-banner .other .user_str.red {
  color: #f05521;
}
.shell-banner.other .user_str.yellow,
.shell-banner .other .user_str.yellow {
  color: #d39b00;
}
.shell-banner.other .user_str .use-t,
.shell-banner .other .user_str .use-t {
  color: rgb(41, 41, 41);
}
.shell-banner.other .user_str .use-t2,
.shell-banner .other .user_str .use-t2 {
  color: rgb(32, 134, 249);
}

.shell-banner.other .user_str_tips,
.shell-banner .other .user_str_tips {
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 20px;
  line-height: 1.3;
  font-size: 24px;
  font-family: "PingFangSC-Regular";
  color: #d39b00;

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shell-banner.other .user_str_tips.red,
.shell-banner .other .user_str_tips.red {
  color: #f05521;
}

.shell-mid {
  margin-top: -20px;
}
.shell-mid.hide {
  display: none;
}
.shell-bill-item {
  line-height: 1;
  height: 122px;
  margin-left: 30px;
  border-bottom: 2px solid #ededf0;
}
.shell-bill-item:last-child {
  border-bottom: 0;
}
.shell-bill-item span {
  line-height: 122px;
  font-size: 30px;
  font-family: "PingFangSC-Regular";
  color: #666666;
}
.shell-mid-right {
  float: right;
  margin-right: 18px;
  text-align: right;
}
.shell-mid-right p {
  margin-top: 30px;
  color: rgb(41, 41, 41);
  font-size: 28px;
  font-family: "SFUIDisplay-Medium";
  -webkit-text-size-adjust: none;
}
.shell-mid-right .shell-itme-p {
  margin-top: 22px;
  color: rgb(153, 153, 153);
  font-size: 24px;
}
.shell-bill-item i {
  float: right;
  margin-right: 30px;
  margin-top: 47px;
  width: 10px;
  height: 18px;
  background: url("~assets/img/jiantou_right@2x.png") no-repeat;
  background-size: 10px 18px;
}
.shell-line {
  height: 22px;
  background-color: #ededf0;
}
.shell-bottom {
  /* margin-top: 20px; */
}
.shell-bottom-title {
  height: 88px;
  line-height: 88px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(51, 51, 51);
  border-bottom: 2px solid #ededf0;
}
.shell-title-item {
  display: inline-block;
  margin-left: 50px;
}
.shell-title-item:first-child {
  margin-left: 30px;
}
.shell-title-item p {
}
.shell-title-item i {
}
.shell-title-item.active {
}
.shell-title-item.active p {
  color: #2086f9;
  font-family: "PingFangSC-Medium";
}
.shell-title-item.active i {
  display: block;
  margin: auto;
  margin-top: -12px;
  height: 6px;
  width: 42px;
  background-color: #2086f9;
  border-radius: 2px;
}
.shell-bottom-list {
}
.shell-statement-empty {
}
.shell-statement-empty i {
  display: block;
  margin-top: 228px;
  margin-left: 330px;
  width: 78px;
  height: 80px;
  background: url("~assets/img/ic_list_default.png") no-repeat;
  background-size: 78px 80px;
}
.shell-statement-empty p {
  text-align: center;
  color: rgb(153, 153, 153);
  font-family: "PingFangSC-Regular";
  font-size: 30px;
}
.shell-bottom-tips {
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  color: #c4c6cb;
  font-family: "PingFangSC-Regular";
  /* background-color: #ecefef; */
}
.shell-bottom-tips.hide {
  display: none;
}

.current-bill-tips,
.current-repayment-tips {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
}
.current-bill-tips.show,
.current-repayment-tips.show {
  display: block;
}
.current-cont {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -270px;
  margin-top: -163px;
  height: 326px;
  width: 540px;
  text-align: center;
  font-size: 34px;
  font-family: "PingFangSC-Regular";
  color: rgb(41, 41, 41);
  background-color: #fff;
  border-radius: 16px;
}
.current-bottom-line {
  position: absolute;
  padding-top: 32px;
  width: 100%;
  height: 2px;
  border-bottom: 2px solid #ededf0;
}
.current-bill-tips i {
  display: block;
  margin-top: -122px;
  margin-left: 140px;
  width: 259px;
  height: 244px;
  background: url("~assets/img/rongyubang@2x.png") no-repeat;
  background-size: 259px 244px;
}
.current-bill-tips h4 {
  margin-top: 50px;
}
.current-bill-tips p {
  width: 100%;
  color: #2086f9;
  position: absolute;
  bottom: 28px;
}
.current-repayment-tips h4 {
  margin-top: 60px;
}
.current-repayment-tips p {
  margin-top: 22px;
  font-size: 26px;
  color: rgb(153, 153, 153);
}
.current-repayment-tips .current-left {
  margin-top: 94px;
  margin-left: 100px;
  color: #2086f9;
  height: 88px;
  float: left;
}
.current-repayment-tips .current-right {
  margin-top: 94px;
  margin-right: 86px;
  float: right;
  height: 88px;
  color: #2086f9;
}
.empty {
  margin-top: 100px;
  padding-bottom: 100px;
}
</style>
